<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:head>
	<h:outputStylesheet name="common-style.css" library="css" />
    </h:head>
    <h:body>
    	<ui:composition template="/template/common/commonLayout.xhtml">
    		<ui:define name="content">
    			<h:form id="form">
    	
					<p:dataGrid id="grid" var="school" value="#{tableBean.schools}" columns="3"
						rows="12" paginator="true"
						paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
						rowsPerPageTemplate="9,12,15">
				
				        <p:panel header="#{school.name}" style="text-align:center">
				            <h:panelGrid columns="1" style="width:100%;background:#fff !important; height:250px">
				                <p:graphicImage value="/images/logos/#{school.urlimg}" width="210"/> 
						
				                <p:commandLink update=":form:schoolDetail" oncomplete="schoolDialog.show()" title="View Detail">
				                    <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" /> 
				                    <f:setPropertyActionListener value="#{school}" 
				                            target="#{tableBean.selectedSchool}" />
				                </p:commandLink>
				            </h:panelGrid>
				        </p:panel>
				
					</p:dataGrid>
					
					<p:dialog header="School Detail" widgetVar="schoolDialog" modal="true">
						<p:outputPanel id="schoolDetail" style="text-align:center;" layout="block">
						
							<p:graphicImage value="/images/logos/#{tableBean.selectedSchool.urlimg}" width="210"/>
							
							<h:panelGrid  columns="2" cellpadding="5">
								<h:outputLabel for="name" value="Nombre: " />
								<h:outputText id="name" value="#{tableBean.selectedSchool.name}" />
								
								<h:outputLabel for="type" value="Tipo: " />
								<h:outputText id="type" value="#{tableBean.selectedSchool.type}" />
								
								<h:outputLabel for="origin" value="Origen: " />
								<h:outputText id="origin" value="#{tableBean.selectedSchool.origin}" />
							</h:panelGrid>
						</p:outputPanel>
					</p:dialog>
				</h:form>  					
    		</ui:define>
 
    	</ui:composition>
    </h:body>
</html>